<template>
  <div class="left-chart-1">
     <dv-border-box-13>
       <div style="display:flex;align-items: center;height: 100%;">
          <div id="lc1"></div>
          <div style="display: flex; flex-direction: column; justify-content: space-evenly; height: 100%;">
            <div style="display:flex;align-items: center;">
              <span>全行发票连号率</span>
              <dv-digital-flop :config="config" style="width:70px;height:50px;" />
            </div>
            <div style="display:flex;align-items: center;">
              <span>机构发票连号率</span>
              <dv-digital-flop :config="config" style="width:70px;height:50px;" />
            </div>
            <div style="display:flex;align-items: center;">
              <span>机构发票连号率</span>
              <dv-digital-flop :config="config" style="width:70px;height:50px;" />
            </div>
          </div>
       </div>
    </dv-border-box-13>

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LeftChart1',
  data () {
    return {
      config: {
        number: [100],
        content: '{nt}%',
        style: {
          fontSize: 16
        }
      }
    }
  },
  mounted () {
    this.getrc1()
  },
  methods: {
    getrc1 () {
      const myrCharts1 = echarts.init(document.getElementById('lc1'))
      const option = {
        title: {
          text: '发票连号情况',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 10,
          top: 20,
          bottom: 20,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            // stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            // stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }

        ]
      }
      option && myrCharts1.setOption(option)
    }
  }
}
</script>

<style lang="less">

.left-chart-1 {
  width: 100%;
  height: 33.3%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  #lc1{
  width: 100%;
  height: 100%;
}
}

</style>
